<template>
  <a-layout style="height: 100vh" id="components-layout-demo-custom-trigger">
    <!-- 左侧导航栏部分 -->
    <a-layout-sider
      width="280px"
      v-model="collapsed"
      :trigger="null"
      collapsible
      :style="{ overflow: 'auto', height: '100vh', scrollbarWidth: 'none' }"
    >
      <div class="qiye">
        <h2>企业供需精准对接服务</h2>
        <span>用户中心(企业)</span>
        <div class="logo" v-show="!collapsed">
          <div class="logo-img" v-if="EntInfo.logo && EntInfo.approvalSt == 1">
            <img :src="EntInfo.logo" alt="" style="width: 100%; height: 100%" />
          </div>
          <div class="logo-img" v-if="!EntInfo.logo || EntInfo.approvalSt != 1">
            <img src="@/assets/images/defult_img.png" alt="" />
          </div>
          <div class="logo-title">{{ EntInfo.name }}</div>
          <div class="logo-Num">
            统一社会信用代码：<em>{{ EntInfo.code }}</em>
          </div>
          <div class="logo-text">
            信用承诺函：
            <span v-if="EntInfo.status == 0">已签署</span>
            <em v-else>未签署</em>
          </div>
          <a-button class="logo-btn" type="primary" :disabled="canUse">
            <router-link to="/usercenter/sign">
              <em v-if="EntInfo.status == 0">查看信用承诺函</em>
              <em v-else>去签署</em>
            </router-link>
          </a-button>
        </div>
      </div>
      <a-menu
        theme="dark"
        mode="inline"
        :inlineCollapsed="false"
        :default-selected-keys="[$route.path]"
        :selectedKeys="[$route.path]"
        @click="handleClick"
      >
        <a-menu-item key="/usercenter/user" :disabled="canUse">
          <router-link to="/usercenter/user">
            <icon-font type="icon-ai-user" />
            <span>用户中心</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu key="sub1" :disabled="canUse">
          <span slot="title">
            <icon-font type="icon-qiye1" />
            <span>我的企业</span>
          </span>
          <a-menu-item key="/usercenter/BaseInformation">
            <router-link to="/usercenter/BaseInformation">
              基本信息
            </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/Relationship">
            <router-link to="/usercenter/Relationship"> 关系网络 </router-link>
          </a-menu-item>
          <!-- <a-menu-item key="/usercenter/OtherInformation">
            <router-link to="/usercenter/OtherInformation">
              招商/招标信息
            </router-link>
          </a-menu-item> -->
          <a-menu-item key="/usercenter/FilingInfo">
            <router-link to="/usercenter/FilingInfo"> 备案信息 </router-link>
          </a-menu-item>
          <!-- <a-menu-item key="/usercenter/PersonnelInfo">
            <router-link to="/usercenter/PersonnelInfo"> 人员信息 </router-link>
          </a-menu-item> -->
          <a-menu-item key="/usercenter/FinancialInfo">
            <router-link to="/usercenter/FinancialInfo"> 财务信息 </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/FinancialYear">
            <router-link to="/usercenter/FinancialYear">
              财务年度数据
            </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/Operations">
            <router-link to="/usercenter/Operations"> 企业运营 </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/Intellectual">
            <router-link to="/usercenter/Intellectual"> 知识产权 </router-link>
          </a-menu-item>

          <a-menu-item key="/usercenter/Research">
            <router-link to="/usercenter/Research"> 研发机构/项目 </router-link>
          </a-menu-item>

          <a-menu-item key="/usercenter/ComExport">
            <router-link to="/usercenter/ComExport">
              单位进出口信息
            </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" :disabled="canUse">
          <span slot="title">
            <icon-font type="icon-duijie" />
            <span>供需管理</span>
          </span>
          <a-menu-item key="/usercenter/MyNeed">
            <router-link to="/usercenter/MyNeed"> 我的需求 </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/MyProduct">
            <router-link to="/usercenter/MyProduct"> 我的产品 </router-link>
          </a-menu-item>
          <a-menu-item key="/usercenter/MyProgramme">
            <router-link to="/usercenter/MyProgramme">
              我的解决方案
            </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="/usercenter/MyMessage" :disabled="canUse">
          <router-link to="/usercenter/MyMessage">
            <icon-font type="icon-message" />
            <span>供需对接管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/usercenter/MyConcerns" :disabled="canUse">
          <router-link to="/usercenter/MyConcerns">
            <icon-font type="icon-message" />
            <span>订阅消息</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu key="sub5" :disabled="canUse">
          <span slot="title">
            <icon-font type="icon-message" />
            <span>消息中心</span>
          </span>
          <a-menu-item key="/usercenter/system">
            <router-link to="/usercenter/system"> 系统消息 </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub6" :disabled="canUse">
          <span slot="title">
            <icon-font type="icon-qianbao1" />
            <span>信贷金融管理</span>
          </span>
          <a-menu-item key="/usercenter/CreditFinancial">
            <router-link to="/usercenter/CreditFinancial">
              信贷金融管理
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- 右侧顶部模块 -->
      <a-layout-header
        class="clearfix index-Top"
        style="background: #fff; padding: 0"
      >
        <!-- <a-icon
          class="trigger"
          theme="filled"
          :type="collapsed ? 'right-square' : 'left-square'"
          @click="() => (collapsed = !collapsed)"
        /> -->
        <div class="f-right clearfix">
          <div class="f-left indexTop-logo clearfix">
            <div
              class="indexTop-img f-left"
              v-if="EntInfo.logo && EntInfo.approvalSt == 1"
            >
              <img :src="getImageUrl(EntInfo.logo)" alt="" />
            </div>
            <div
              class="indexTop-img f-left"
              v-if="!EntInfo.logo || EntInfo.approvalSt != 1"
            >
              <img src="@/assets/images/defult_img.png" alt="" />
            </div>
            <span class="ml-10">{{ EntInfo.name }}</span>
          </div>
          <div class="f-left indexTop-return">
            <router-link to="/usercenter/system">
              <div class="to-hover">
                <a-badge :count="noReadNum">
                  <a-icon
                    type="bell"
                    class="icon-color mr-8"
                    :overflow-count="999"
                    :style="{ fontSize: '20px' }"
                  />
                  <span>消息</span>
                </a-badge>
              </div>
            </router-link>
          </div>
          <div class="f-left indexTop-return">
            <router-link to="/">
              <div class="to-hover">
                <i class="iconfont icon-shouye icon-color mr-8"></i>
                <span>返回主页</span>
              </div>
            </router-link>
          </div>
          <div class="f-left indexTop-Out" @click="LoginOut">
            <div class="to-hover">
              <a-icon type="setting" class="icon-color mr-8" theme="filled" />
              <span>退出</span>
            </div>
          </div>
        </div>
      </a-layout-header>
      <!-- 主要内容部分 -->
      <a-layout-content
        :style="{
          margin: '16px',
          'border-radius': '4px',
          height: '100%',
          overflow: 'auto',
        }"
      >
        <!-- 子路由的路由出口 -->
        <router-view @getEntBaseInfo="getEntBaseInfo"></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
// import { GetLogout } from "@/apis/user";
import { Icon } from "ant-design-vue";
import {
  getToken,
  removeToken,
  removeCookies,
  getCookiesUserInfo,
} from "@/utils/auth"; // get token from cookie     setToken
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_kb07n5mf48k.js",
});
import store from "@/store";
import { getCompaynInfo } from "@/apis/com/company";
export default {
  data() {
    return {
      collapsed: false,
      openKeys: [],
      EntId: "",
      EntInfo: {},
      canUse: true,
      timer: null,
    };
  },
  watch: {
    openKeys(val) {
      console.log("openKeys", val);
    },
  },
  computed: {
    noReadNum() {
      return this.$store.state.noReadMsgCount;
    },
  },
  created() {
    this.getEntBaseInfo();
    this.getNoReadMsg();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },

  methods: {
    /**
     * 获取未读消息
     */
    async getNoReadMsg() {
      this.$store.dispatch("getNoReadMsgCount");
      this.timer = setInterval(() => {
        this.$store.dispatch("getNoReadMsgCount");
      }, 10 * 1000);
    },

    toMessage() {
      this.$router.push("/usercenter/system");
    },
    //退出登录
    LoginOut() {
      let _this = this;
      _this.$confirm({
        title: "您确定要退出吗?",
        content: "",
        onOk() {
          let prefix = GolbUrl.uaaUri;
          let accessToken = getToken();
          removeToken();
          removeCookies();
          store.state.TokenValue = "";
          localStorage.removeItem("LH_WEB_TOKEN");
          // localStorage.removeItem("LH_WEB_CODE");
          _this.Islogin = false;
          _this.$router.push("/");
          location.reload();
          let logoutUrl =
            prefix +
            "/oauth/remove/token?access_token=" +
            accessToken +
            "&redirect_uri=" +
            GolbUrl.redirect_uri;
          window.location.href = logoutUrl;
        },
        onCancel() {},
      });
    },
    handleClick(e) {
      console.log(e);
    },
    // 获取企业基本信息
    getEntBaseInfo() {
      const id = JSON.parse(getCookiesUserInfo()).companyId;
      getCompaynInfo(id)
        .then((res) => {
          if (res.code == 200) {
            this.EntInfo = res.data;
            if (res.data.approvalSt == 1) {
              this.canUse = false;
            }
            console.log("获取企业基本信息", this.EntInfo);
          }
        })
        .catch((error) => {});
    },
  },
  components: {
    IconFont,
  },
};
</script>
<style lang="less" scoped>
::v-deep .ant-menu-dark,
::v-deep .ant-menu-dark .ant-menu-sub {
  background-color: #1e44ab;
  box-shadow: none;
}

::v-deep .ant-menu-dark .ant-menu-inline.ant-menu-sub {
  box-shadow: none;
}

.ant-layout-sider,
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background-color: #2a51bc;
}

#components-layout-demo-custom-trigger {
  .qiye {
    text-align: center;

    h2 {
      margin-top: 24px;
      margin-bottom: 8px;
      font-size: 22px;
      color: #fff;
    }

    span {
      font-size: 18px;
      line-height: 18px;
      font-weight: normal;
      color: #188af1;
    }

    .logo {
      margin: 24px 8px;
      width: 264px;
      height: 230px;
      background-color: #ffffff;
      border-radius: 10px;
      padding-top: 23px;

      .logo-img {
        margin: 0 auto;
        margin-bottom: 8px;
        width: 60px;
        height: 60px;
        background-image: linear-gradient(90deg);
        border: solid 2px #ebeef5;
        border-radius: 50%;
        text-align: center;
        overflow: hidden;

        img {
          // margin-top: 8px;
          width: 42px;
          height: 42px;
        }
      }

      .logo-title {
        font-size: 14px;
        color: #606266;
      }

      .logo-Num {
        font-size: 12px;
        color: #606266;
        margin: 8px 0;
      }

      .logo-text {
        font-size: 12px;
        color: #606266;
        margin-bottom: 8px;

        em {
          color: #ee6224;
        }

        span {
          font-size: 12px;
        }
      }

      .logo-btn {
        // width: 110px;
        height: 32px;
        background-color: #188af1;
        border-radius: 16px;
      }
    }
  }

  .index-Top {
    span {
      font-size: 16px;
      color: #606266;
    }

    .indexTop-logo {
      margin-right: 45px;

      .indexTop-img {
        width: 32px;
        height: 32px;
        margin-top: 15px;
        border: solid 2px #ebeef5;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }

    .indexTop-return {
      margin-right: 32px;

      .to-hover {
        .icon-color {
          color: #909399;
        }
      }

      &:hover {
        .icon-color {
          color: #188af1;
        }

        span {
          color: #188af1;
        }
      }
    }

    .indexTop-Out {
      cursor: pointer;
      margin-right: 21px;
      font-size: @font16;

      .to-hover {
        .icon-color {
          color: #606266;
        }
      }

      &:hover {
        .icon-color {
          color: #188af1;
        }

        span {
          color: #188af1;
        }
      }
    }
  }
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 64px;
  cursor: pointer;
  transition: color 0.3s;
  color: #fff;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
</style>
